<template>
  <div class="upload-file" ref="uploadEl"></div>
</template>

<script>
import { Toast } from 'vant'
Toast.allowMultiple(true)
export default {
  name: 'UploadFile',
  data () {
    return {
      // 显示的图片
      uploadPic: '',
      // 上传的文件
      uploadFile: null
    }
  },
  computed: {
    uploadEl () {
      return this.$refs.uploadEl
    }
  },
  mounted () {
    this.initUpload(this.uploadEl)
  },
  methods: {
    // 初始化上传组件
    initUpload (elem) {
      if (!elem) {
        return
      }
      // eslint-disable-next-line no-undef
      $(elem).upload({
        maxWidth: 750
      }).on('loadStart', this.onStart.bind(this))
        .on('loadComplete', this.onComplete.bind(this))
        .on('cropComplete', this.onCrop.bind(this))
    },
    // 开始上传
    onStart () {
      this.uploadFile = null
      this.loading = Toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
    },
    // 图片加载完成
    onComplete (e, result) {
      this.loading.clear()
    },
    // 裁剪完成
    onCrop (e, file) {
      this.uploadFile = file
      this.$emit('onCrop', file)
    }
  }
}
</script>

<style scoped lang="scss">
@import "../assets/css/mixin.scss";
.upload-file {
  width: 100%;
  height: 100%;
}
</style>
